<template>
	<common-page>
		<view class="page-title margin-top-32 font-28" style="color: #1E2531;font-weight: bold;">选择工作模式</view>
		<image src="../../static/install_bg.jpg" mode="" style="width: 100%;height: 332rpx;margin-top: 28rpx;"></image>
		<view class="page-content-box">
			<view class="title font-30" style="color: #4B4D5E;font-weight: bold;">安装说明</view>
			<view class="txt font-24" style="color: #9FA2B4;margin-top: 4rpx;">
				选择“跌倒监测”模式，设备将对范围内的人员实时监测跌倒状况；选择“睡眠监测”模式，设备对范围内的人员实时监测睡眠、睡姿、呼吸暂停等状况；
			</view>
		</view>
		<u-subsection
			class="page-custom-section"
			:list="list" mode="button" :current="currentIndex"
			activeColor="#fff" inactiveColor="#333333"
			fontSize="30rpx"
			keyName="label"
			@change="bindSectionChange"
		></u-subsection>
		<view class="btn-wrap">
			<u-button type="primary" text="完成" color="#417CE9" class="btn-next" @click="bindSubmit"></u-button>
		</view>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			list: [{
				label: '跌倒监测'
			}, {
				label: '睡眠监测'
			}],
			currentIndex: 0,
			deviceSn: ''
		};
	},
	onLoad(option) {
		this.deviceSn = option.deviceSn;
		this.getDeviceInfoData();
	},
	methods: {
		// 选择工作模式
		bindSectionChange(ev) {
			this.currentIndex = ev;
		},
		// 返回
		bindGoToBack() {
			uni.navigateBack();
		},
		// 获取设备详情
		async getDeviceInfoData() {
			const params = {
				deviceSn: this.deviceSn
			};
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/getDeviceInfo', params));
			if (err) return;
			this.currentIndex = result.workMode ? 1 : 0;
		},
		// 提交
		async bindSubmit() {
			const params = {
				deviceSn: this.deviceSn,
				workMode: !!this.currentIndex
			};
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-device/updateDeviceInfo'));
			if (err) return;
			uni.$u.toast('更新成功');
		}
	}
};
</script>

<style lang="scss" scoped>
.page-content-box {
	padding: 27rpx 22rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: 28rpx;
}
::v-deep .u-subsection {
	height: 66rpx !important;
	border-radius: 66rpx !important;
	padding: 0 !important;
	margin-top: 24rpx !important;
	.u-subsection__bar {
		border-radius: 66rpx !important;
		background-color: #417CE9;
		height: 66rpx !important;
	}
}
.btn-wrap {
	position: fixed;
	bottom: 80rpx;
	left: 32rpx;
	right: 32rpx;
}
::v-deep .u-button {
	border-radius: 60rpx !important;
	&.u-button--disabled {
		background-color: #D7D7D7 !important;
		border-color: #D7D7D7 !important;
	}
	.u-button__text {
		font-size: 32rpx !important;
		font-weight: bold;
	}
}
</style>
